<template>
  <div class="pg-shaohuo-content-banner"
    layout="column">
    
    <!-- 页面搜索组件
    -------------------------- -->
    <comp-page-search
      :isSingleSearch="true"
      @searchCondChange="searchCondChange"
      module="PgShaohuoContentType"></comp-page-search>
    
    <!-- 功能按钮区
    -------------------------- -->
    <div class="gl-page-btns">
      <el-button type="success" size="mini"
        @click.native="showDialogByToggle = !showDialogByToggle">新增banner</el-button>
      <el-button @click.native="statusSelected('id', '1')"
        type="primary" size="mini"
        :loading="loadingBtn === '恢复' && loadingRow === null">恢复</el-button>
      <el-button @click.native="statusSelected('id', '0')"
        type="primary" size="mini"
        :loading="loadingBtn === '禁用' && loadingRow === null">禁用</el-button>
      <el-button @click.native="deleteSelected('id')"
        type="primary" size="mini"
        :loading="loadingBtn === '删除' && loadingRow === null">删除</el-button>
      <el-button @click.native="sortSelected('id', '1')"
        type="primary" size="mini"
        :loading="loadingBtn === '上移' && loadingRow === null">上移</el-button>
      <el-button @click.native="sortSelected('id', '-1')"
        type="primary" size="mini"
        :loading="loadingBtn === '下移' && loadingRow === null">下移</el-button>
    </div>

    <!-- 数据表格
    -------------------------- -->
    <comp-page-table
      :tableConfig="tableConfig"
      :tableData="tableData"
      :loading="tableLoading"
      :total="tableTotal"
      :pageSize="Number(pageSize)"
      :pageSizes="pageSizes"
      @currentChange="tableCurrentChange"
      @sortChange="tableSortChange"
      @sizeChange="tableSizeChange"
      @selectionChange="tableSelectionChange">
      <el-table-column
        label="操作"
        width="185">
        <template slot-scope="scope">
          <el-button  @click.native.prevent="getDataById(scope.row.id, scope.$index)"
            type="text" size="small"
            :loading="loadingBtn === '编辑' && loadingRow === scope.$index">编辑</el-button>
          <el-button @click.native.prevent="deleteOne(scope.row.id, scope.$index)"
            type="text" size="small"
            :loading="loadingBtn === '删除' && loadingRow === scope.$index">删除</el-button>
          <el-button @click.native.prevent="sortOne(scope.row.id, scope.$index, '1')"
            type="text" size="small"
            :loading="loadingBtn === '上移' && loadingRow === scope.$index">上移</el-button>
          <el-button @click.native.prevent="sortOne(scope.row.id, scope.$index, '-1')"
            type="text" size="small"
            :loading="loadingBtn === '下移' && loadingRow === scope.$index">下移</el-button>
        </template>
      </el-table-column>
    </comp-page-table>

    <!-- 添加，修改捎货类型弹窗
    -------------------------- -->
    <add-edit-banner
      :showByToggle="showDialogByToggle"
      :editData="editData"
      @dialogComplete="getTableData"></add-edit-banner>
  </div>
</template>

<script>
import AddEditBanner from './add-edit-banner'
import { tableConfig } from './config'
import {
  bannerSortMixin,
  bannerStatusMixin,
  bannerDeleteMixin,
  bannerEditMixin
} from './mixins'

import { ShaohuoContentService } from 'services/Api'
import {
  ConfirmTempMixin,
  btnLoadingMixin,
  tableCoreMixin,
  tableDeleteMixin,
  tableSortMixin,
  tableStatusMixin,
  tableSingleSearchMixin,
  dialogBeforeEditMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgShaohuoContentBanner',
  components: { AddEditBanner },
  mixins: [
    ConfirmTempMixin,
    btnLoadingMixin,
    tableCoreMixin,
    tableDeleteMixin,
    tableSortMixin,
    tableStatusMixin,
    tableSingleSearchMixin,
    bannerSortMixin,
    bannerStatusMixin,
    bannerDeleteMixin,
    bannerEditMixin,
    dialogBeforeEditMixin
  ],
  data () {
    return {
      tableConfig
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 获取全部banner参数
    bannerListParam () {
      return {
        acc_id: this.acc_id,
        page: this.page,
        page_size: this.pageSize,
        search: this.search,
        sort_field: this.sort_field,
        sort_type: this.sort_type
      }
    }
  },
  methods: {
    // 全部捎货人种类信息
    preFetchTableData () {
      return ShaohuoContentService.bannerList(this.bannerListParam)
    },
    // 表格数据处理函数
    tableDataHandler (list) {
      return list.map(item => {
        item.status = item.status === '0' ? '禁用' : '有效'
        return item
      })
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-content-banner) {}
</style>
